<!DOCTYPE html>
<html>

<head>
    <title>服务地图</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/weui-master/dist/style/weui.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../lib/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/SeedsUI-master/app/scripts/lib/seedsui/seedsui.min.css">
    <link rel="stylesheet" type="text/css" href="../sys/css/foot.css">
    <style>
    #ywmap {
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="box">
        <section id="ywmap">
        </section>
        <footer class="foot">
            <my-foot @choose="choosemune"></my-foot>
        </footer>
    </div>
    <script src="../lib/jquery/jquery-1.11.0.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../sys/js/foot.js"></script>
    <script src="../data/data.json"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>
    <script>
    $(function() {

        var windowHeight = $(window).height();
        var footheight = $("footer").height();
        $("#ywmap").css("height", windowHeight - footheight);



        // 百度地图API功能
        var map = new BMap.Map("ywmap");
        var point = new BMap.Point(120.083299, 29.302013);
        map.centerAndZoom(point, 19);
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放


        var point1 = new BMap.Point(120.082812, 29.301650);
        var point2 = new BMap.Point(120.083660, 29.301600);
        var point3 = new BMap.Point(120.083703, 29.302080);
        
        var myIcon = new BMap.Icon("../img/map-marker (1)/map-marker-marker-outside-pink.png", new BMap.Size(26, 42), {
            anchor: new BMap.Size(13, 42), // 图标中下方箭头位置
            imageOffset: new BMap.Size(0, 20) // 设置图片偏移,大图片部分显示
        });
       
        var marker1 = new BMap.Marker(point1,{icon: myIcon}); //创建标记点，不写第二个参数的话是默认icon红红的一个点
        // var marker1 = new BMap.Marker(point1);
        var marker2 = new BMap.Marker(point2,{icon: myIcon});

        var marker3 = new BMap.Marker(point3,{icon: myIcon});

        // 春江路茶叶专业街131号
        // 郑鸿茶行
        map.addOverlay(marker1); //增加点
        map.addOverlay(marker2);
        map.addOverlay(marker3);
        var opts = [{
                width: 200, // 信息窗口宽度
                height: 70, // 信息窗口高度
                title: "义乌太极茶行义乌旗舰店", // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
            }, {
                width: 200, // 信息窗口宽度
                height: 70, // 信息窗口高度
                title: "金润棠武夷茗茶", // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
            },

            {
                width: 200, // 信息窗口宽度
                height: 70, // 信息窗口高度
                title: "景隆茶业", // 信息窗口标题
                enableMessage: true, //设置允许信息窗发送短息
                message: "亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
            }

        ];

        var infoWindow1 = new BMap.InfoWindow("地址：义乌稠城街道春江路137号", opts[0]); // 创建信息窗口对象 
        marker1.addEventListener("click", function() {
            map.openInfoWindow(infoWindow1, point1); //开启信息窗口
        });

        var infoWindow2 = new BMap.InfoWindow("地址：下埠头街21号", opts[1]); // 创建信息窗口对象 
        marker2.addEventListener("click", function() {
            map.openInfoWindow(infoWindow2, point2); //开启信息窗口
        });


        var infoWindow3 = new BMap.InfoWindow("地址：春江路113-2号", opts[2]); // 创建信息窗口对象 
        marker3.addEventListener("click", function() {
            map.openInfoWindow(infoWindow3, point3); //开启信息窗口
        });
        $(".BMap_pop").css("left", "160px");
        $(".BMap_pop").css("top", "150px");



















        var box = new Vue({
            el: '.foot',
            data: {},
            components: {
                myFoot
            },
            methods: {
                choosemune: function(i) {
                    window.location.href = menulist[i];
                }

            }
        })
        $("footer ul li").removeClass("active");
        $("footer ul li:nth(2)").addClass("active");
    })
    </script>
</body>

</html>
